<template>
  <div class="dibu">
    <div class="tou">
      <p>知识图谱</p>

    </div>
    <section class="knowledge-section">
      <!-- <h2>知识图谱 <a href="#">更多>></a></h2> -->

      <!-- <div class="sidebar">
        <ul class="liebiao">
          <div class="wen">
            <li class="lii"><a href="#" @click.prevent="showContent('content1')" class="wenzi">知识图谱1</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content2')" class="wenzi">知识图谱2</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content3')" class="wenzi">知识图谱3</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content4')" class="wenzi">知识图谱4</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content5')" class="wenzi">知识图谱5</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content6')" class="wenzi">知识图谱6</a></li>
          </div>
        </ul>
        <div v-if="currentContent === 'content1'" class="neirong">
          内容1的视图
        </div>
        <div v-if="currentContent === 'content2'" class="neirong">
          内容2的视图
        </div>
        <div v-if="currentContent === 'content3'" class="neirong">
          内容3的视图
        </div>
        <div v-if="currentContent === 'content4'" class="neirong">
          内容4的视图
        </div>
        <div v-if="currentContent === 'content5'" class="neirong">
          内容5的视图
        </div>
        <div v-if="currentContent === 'content6'" class="neirong">
          内容6的视图
        </div>
      </div> -->
    </section>

  </div>

</template>

<script>

//import AppSidebar from "@/components/AppSidebar.vue";


export default {
  name: 'knowledge',
  components: {
    //AppSidebar,
  },
  data() {
    return {
      currentContent: 'content1',// 初始内容为 content1
    };
  },

  mounted() {

  },
  methods: {
    showContent(contentId) {
      // 实现函数逻辑
      this.currentContent = contentId;
      console.log('显示内容：', contentId);
    },


  }
};
</script>
<style scoped>
.tou {
  width: 80%;
  height: 70px;
  margin: auto;
  border-radius: 12px 12px 0px 0px;
  background: rgba(36, 41, 47, 1);
  margin-top: 10px;
}

.tou p {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 34.75px;
  color: rgba(42, 130, 228, 1);
  text-align: left;
  vertical-align: top;
  padding-top: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 20px;

}

.knowledge-section {
  height: 550px;
  width: 80%;
  margin: auto;
  background: rgba(36, 41, 47, 1);
  border-radius: 0px 0px 12px 12px;

}


.sidebar {
  width: 100%;
  height: 90%;
  display: flex;
  background: rgba(57, 61, 66, 1);
}

.neirong {

  width: 70%;
  height: 90%;
  color: rgba(255, 255, 255, 1);
  /* 设置链接文字颜色为蓝色 */
}

.liebiao {
  width: 25%;
  height: 100%;
  background: rgba(36, 41, 47, 0.8);
  border-radius: 0px 50px 50px 0px;
  margin: 0px;
  padding: 0px 20px 0px 20px;
}

.wenzi {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 26.06px;
  color: rgba(255, 255, 255, 1);
  text-align: left;
  vertical-align: top;
  text-decoration: none;
  /* 去除链接的下划线 */


}

.lii {
  margin-top: 20px;
  text-align: left;
  border-bottom: 1px solid white;
  /* 添加白色底部边框 */
}

.liebiao li::after {

  position: absolute;
  /* 绝对定位在列表项下方 */
  left: 0;
  /* 距离左侧为0，即从列表项的最左侧开始 */

  width: 100%;
  /* 下划线宽度与列表项宽度一致 */
  height: 1px;
  /* 下划线高度 */
  color: rgba(255, 255, 255, 1);

}

.wen {
  margin-top: 40px;
  width: 100%;
  height: 100%;

}
</style>